<template>
  <div class="min-h-screen bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-2xl mx-auto">
      <!-- 标题和实时时间 -->
      <div class="text-center mb-8">
        <h1 class="text-3xl font-bold text-gray-900 mb-2">
          Jenkins CI Demo
        </h1>
        <p class="text-gray-600 mb-4">
          前后端分离项目演示
        </p>
        <!-- 实时时间显示 -->
        <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
          <div class="flex items-center justify-center space-x-2">
            <svg class="h-5 w-5 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <span class="text-lg font-mono text-gray-800">{{ currentTime }}</span>
          </div>
          <p class="text-sm text-gray-500 mt-1">当前时间</p>
        </div>
      </div>

      <div class="grid gap-6 md:grid-cols-2">
        <!-- 系统信息卡片 -->
        <div class="card p-6">
          <div class="flex items-center justify-between mb-6">
            <h2 class="text-xl font-semibold text-gray-800">
              系统信息
            </h2>
            <div class="flex items-center space-x-2">
              <div v-if="loading" class="loading"></div>
              <button 
                @click="fetchSystemInfo"
                :disabled="loading"
                class="text-sm text-blue-600 hover:text-blue-800 disabled:text-gray-400"
                title="刷新系统信息"
              >
                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                </svg>
              </button>
            </div>
          </div>

          <!-- 系统信息展示 -->
          <div v-if="systemInfo" class="space-y-4">
            <div class="info-item">
              <span class="info-label">项目名称</span>
              <span class="info-value">{{ systemInfo.name }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">版本号</span>
              <span class="info-value">{{ systemInfo.version }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">作者</span>
              <span class="info-value">{{ systemInfo.author }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">最后更新</span>
              <span class="info-value text-sm">{{ lastUpdateTime }}</span>
            </div>
          </div>

          <!-- 加载状态 -->
          <div v-else-if="loading" class="text-center py-8 text-gray-500">
            <div class="loading mx-auto mb-4"></div>
            <p>正在获取系统信息...</p>
          </div>

          <!-- 错误状态 -->
          <div v-else-if="error" class="text-center py-8">
            <svg class="mx-auto h-12 w-12 text-red-400 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
            </svg>
            <p class="text-red-600 mb-4">{{ error }}</p>
            <button 
              @click="fetchSystemInfo"
              class="btn btn-primary text-sm"
            >
              重试
            </button>
          </div>
        </div>

        <!-- 状态信息卡片 -->
        <div class="card p-6">
          <h2 class="text-xl font-semibold text-gray-800 mb-6">
            连接状态
          </h2>
          
          <div class="space-y-4">
            <div class="info-item">
              <span class="info-label">前端状态</span>
              <span class="info-value">
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                  <span class="w-2 h-2 bg-green-400 rounded-full mr-1"></span>
                  运行中
                </span>
              </span>
            </div>
            <div class="info-item">
              <span class="info-label">后端状态</span>
              <span class="info-value">
                <span v-if="systemInfo" class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                  <span class="w-2 h-2 bg-green-400 rounded-full mr-1"></span>
                  已连接
                </span>
                <span v-else-if="error" class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
                  <span class="w-2 h-2 bg-red-400 rounded-full mr-1"></span>
                  连接失败
                </span>
                <span v-else class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                  <span class="w-2 h-2 bg-yellow-400 rounded-full mr-1"></span>
                  检测中
                </span>
              </span>
            </div>
            <div class="info-item">
              <span class="info-label">自动刷新</span>
              <span class="info-value">
                <label class="inline-flex items-center">
                  <input 
                    type="checkbox" 
                    v-model="autoRefresh" 
                    class="form-checkbox h-4 w-4 text-blue-600"
                  >
                  <span class="ml-2 text-sm">{{ autoRefresh ? '已启用' : '已禁用' }}</span>
                </label>
              </span>
            </div>
          </div>
        </div>
      </div>

      <!-- 成功信息 -->
      <div v-if="successMessage" class="success mt-6">
        <div class="flex items-center">
          <svg class="h-5 w-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
          </svg>
          <span>{{ successMessage }}</span>
        </div>
      </div>

      <!-- 页脚 -->
      <div class="text-center mt-8 text-sm text-gray-500">
        <p>
          构建于 Vue 3 + Vite | 后端 Spring Boot
        </p>
        <p class="mt-1">
          适用于 Jenkins CI/CD 部署
        </p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue'
import { getSystemInfo } from './api/systemApi.js'

// 响应式数据
const systemInfo = ref(null)
const loading = ref(false)
const error = ref('')
const successMessage = ref('')
const currentTime = ref('')
const lastUpdateTime = ref('')
const autoRefresh = ref(true)

// 定时器引用
let timeTimer = null
let refreshTimer = null

// 格式化时间
const formatTime = (date) => {
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false
  })
}

// 更新当前时间
const updateCurrentTime = () => {
  currentTime.value = formatTime(new Date())
}

// 获取系统信息
const fetchSystemInfo = async (showMessage = true) => {
  loading.value = true
  error.value = ''
  if (showMessage) {
    successMessage.value = ''
  }
  
  try {
    const data = await getSystemInfo()
    systemInfo.value = data
    lastUpdateTime.value = formatTime(new Date())
    
    if (showMessage) {
      successMessage.value = '系统信息获取成功！'
      // 3秒后清除成功消息
      setTimeout(() => {
        successMessage.value = ''
      }, 3000)
    }
    
  } catch (err) {
    error.value = `获取系统信息失败: ${err.message}`
    systemInfo.value = null
    lastUpdateTime.value = ''
  } finally {
    loading.value = false
  }
}

// 启动自动刷新
const startAutoRefresh = () => {
  if (refreshTimer) {
    clearInterval(refreshTimer)
  }
  
  if (autoRefresh.value) {
    // 每30秒自动刷新一次
    refreshTimer = setInterval(() => {
      fetchSystemInfo(false) // 自动刷新时不显示成功消息
    }, 30000)
  }
}

// 监听自动刷新开关
watch(autoRefresh, (newValue) => {
  if (newValue) {
    startAutoRefresh()
  } else {
    if (refreshTimer) {
      clearInterval(refreshTimer)
      refreshTimer = null
    }
  }
})

// 组件挂载时
onMounted(() => {
  // 立即更新时间
  updateCurrentTime()
  
  // 启动时间定时器，每秒更新
  timeTimer = setInterval(updateCurrentTime, 1000)
  
  // 页面加载时自动获取系统信息
  fetchSystemInfo(false)
  
  // 启动自动刷新
  startAutoRefresh()
})

// 组件卸载时清理定时器
onUnmounted(() => {
  if (timeTimer) {
    clearInterval(timeTimer)
  }
  if (refreshTimer) {
    clearInterval(refreshTimer)
  }
})
</script>